<template>
  <a-card
    class="general-card"
    title="我的团队"
    :header-style="{ paddingBottom: '18px' }"
    :body-style="{ paddingBottom: '12px' }"
  >
    <a-list :bordered="false">
      <a-list-item
        v-for="team in teamList"
        :key="team.id"
        action-layout="horizontal"
      >
        <!-- <a-skeleton v-if="loading" :loading="loading" :animation="true">
          <a-row :gutter="6">
            <a-col :span="6">
              <a-skeleton-shape shape="circle" />
            </a-col>
            <a-col :span="16">
              <a-skeleton-line :widths="['100%', '40%']" :rows="2" />
            </a-col>
          </a-row>
        </a-skeleton> -->
        <a-list-item-meta :title="team.teamName">
          <template #avatar>
            <!-- <a-avatar>
              <img :src="team.avatar" />
            </a-avatar> -->
              <a-button type="primary" @click="enterTeam(team.id as unknown as string)">
              进入团队
            </a-button>
          </template>
          <template #description> 共{{ team.memberCnt}}人 </template>
          
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script lang="ts">
  import { removeMyInterceptor } from '@/api/interceptor';
import { Message } from '@arco-design/web-vue';
import axios from 'axios'
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup(){
  const router = useRouter();
  var teamList = ref([
    {
      id:0,
      teamName:'',
      memberCnt:1,
    }
  ]);
  const enterTeam = (id:string) => {
    //传入团队ID 
    // console.log('777777777');
    // console.log(props.id);
    // const thisID = props.id;
    window.localStorage.setItem('teamID',id as unknown as string);
    
    router.push({ path: '/team', query: { id: id } })


  };
  return{
    teamList,
    enterTeam,
  }
},
mounted(){
  this.$nextTick(()=>{
        this.getTeam();
      })
},
methods:{
  getTeam(){
 removeMyInterceptor();
        axios({
          method: 'post',           /* 指明请求方式，可以是 get 或 post */
          url: 'user/teamList',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
          data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            userID:localStorage.getItem('id'),
          })
        }).then( (response) => {
          var _this = this;
          console.log('请求成功');
          console.log(response.data)
          if (response.data.code === 0) {
            _this.teamList = [];
            for(var i = 0;i<response.data.data.length; i++){
              _this.teamList = _this.teamList.concat({
                teamName:response.data.data[i].teamName,
                memberCnt:response.data.data[i].memberCnt,
                id:response.data.data[i].id,
              });
            }
            console.log('加载团队列表成功');
          } else {
            console.log('失败');
            // Message.error(response.data.description)
          }
        }).catch(function () {
          console.log('请求失败');
        });
  }
}
})
  
  
</script>

<style scoped lang="less">
  .general-card {
    height: 356px;
    .arco-list-item {
      height: 72px;
      padding-left: 0;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--color-neutral-3);
      &:last-child {
        border-bottom: none;
      }
      .arco-list-item-meta {
        padding: 0;
      }
    }
  }
</style>
